<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="type"
      width="35%"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        label-position="right"
        label-width="auto"
        :model="addForm"
        :rules="rule"
        class="dialog-body"
      >
        <el-form-item
          class="custom-label"
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="addForm.name"
            class="input"
            placeholder="请输入车辆类型"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="custom-label"
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="addForm.allowableLoad"
            class="input"
            placeholder="请输入车型载重"
          >
            <i
              slot="suffix"
              class="dw"
            >吨</i>
          </el-input>
        </el-form-item>
        <el-form-item
          class="custom-label"
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="addForm.allowableVolume"
            class="input"
            placeholder="请输入车型体积"
          >
            <i
              slot="suffix"
              class="dw"
            >立方</i>
          </el-input>
        </el-form-item>
        <el-form-item
          class="custom-label"
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="addForm.measureLong"
            class="input"
            placeholder="请输入长"
          >
            <i
              slot="suffix"
              class="dw"
            >米</i>
          </el-input>
        </el-form-item>
        <el-form-item
          class="custom-label"
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="addForm.measureWidth"
            class="input"
            placeholder="请输入宽"
          >
            <i
              slot="suffix"
              class="dw"
            >米</i>
          </el-input>
        </el-form-item>
        <el-form-item
          class="custom-label"
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="addForm.measureHigh"
            class="input"
            placeholder="请输入高"
          >
            <i
              slot="suffix"
              class="dw"
            >米</i>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button
          type="danger"
          @click="sendMessage"
        >确 定</el-button>
        <el-button @click="$emit('update:dialogVisible', false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, UpData, update } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    // 控制弹层关闭
    dialogVisible: {
      type: Boolean,
      require: true
    },
    // 新增和编辑模式类型
    type: {
      type: String,
      require: true,
      default: ''
    }
  },
  data() {
    return {
      form: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureHigh: '0.0', // 高
        measureLong: '0.0', // 长
        measureWidth: '0.0', // 宽
        name: '' // 车辆类型名称
      },
      addForm: {}, // 用于编辑模式和新增模式的过度
      rule: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: ['blur'] },
          { min: 1, max: 30, message: '长度不能超过30个字符', trigger: ['blur'] }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: ['blur'] },
          { pattern: /^(?:\d{1,2}(?:\.\d{1,2})?|9(?:[0-8]\d?(?:\.\d{1,2})?|99(?:\.00?)?))$/, message: '只能输入1-100之间的正整数,请重新输入', trigger: ['blur'] }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: ['blur'] },
          { pattern: /^(?:\d{1,2}(?:\.\d{1,2})?|9(?:[0-8]\d?(?:\.\d{1,2})?|99(?:\.00?)?))$/, message: '只能输入1-100之间的正整数,请重新输入', trigger: ['blur'] }
        ],
        measureLong: [
          // { required: false },
          { pattern: /^(?:\d{1,2}(?:\.\d{1,2})?|9(?:[0-8]\d?(?:\.\d{1,2})?|99(?:\.00?)?))$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: ['change'] }
        ],
        measureWidth: [{ pattern: /^(?:\d{1,2}(?:\.\d{1,2})?|9(?:[0-8]\d?(?:\.\d{1,2})?|99(?:\.00?)?))$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: ['change'] }],
        measureHigh: [{ pattern: /^(?:\d{1,2}(?:\.\d{1,2})?|9(?:[0-8]\d?(?:\.\d{1,2})?|99(?:\.00?)?))$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: ['change'] }]
      }
    }
  },
  watch: {
    dialogVisible(newValue) {
      // 关闭弹层后清除弹层内form表单内的数据
      if (newValue === false && this.type === '新增车型') this.$refs.form.resetFields()
      // 显示默认数据
      if (newValue === true && this.type === '新增车型') this.addForm = this.form
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
    },
    // 点击确认按钮
    async sendMessage() {
      this.$refs.form.validate(async (isok) => {
        if (isok) {
          if (this.type === '新增车型') {
            const res = await add(this.addForm)
            if (res.code === 200) this.$message.success(res.msg)
            this.$emit('updata')
          } else if (this.type === '编辑车型') this.update()
          this.$emit('update:dialogVisible', false)
        } else {
          this.$message.error('*号为必填项！')
        }
      })
    },
    // 进行数据回显
    async UpData(id) {
      const res = await UpData(id)
      this.addForm = res.data
    },
    // 编辑数据
    async update() {
      const res = await update(this.addForm.id, this.addForm)
      console.log(res)
      if (res.code === 200) this.$message.success(res.msg)
      this.$emit('updata')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

// 改变el-form-item中lable的样式
::v-deep .custom-label .el-form-item__label {
    font-weight: 400;
    color: #20232a;
}
  .dialog-body{
    width: 510px;
    // height: 354px;
    margin: 0 auto;
    margin-bottom: 40px;

    .input{
      border-radius: 5px;
      color: #20232a;
      width: 380px;
      height: 40px;

      // 修改el-input标签后面的单位样式
      .dw{
        font-style:normal;
        color: #000000;
        font-weight: 300;
        margin-right: 10px;
	}
    }
  }
  .dialog-footer{
    text-align: center;
  }
</style>
